<template>
  <div 
    class="pet-drag-bar"
    @mousedown="startDrag"
  >
    <div class="drag-indicator">
      <div class="drag-dots">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>
    </div>
    
    <div class="window-controls">
      <!-- 置顶按钮 -->
      <el-tooltip 
        :content="alwaysOnTop ? '取消置顶' : '窗口置顶'" 
        placement="bottom"
      >
        <button 
          class="control-btn pin-btn"
          :class="{ active: alwaysOnTop }"
          @click="togglePin"
          @mousedown.stop
        >
          <el-icon><Stamp /></el-icon>
        </button>
      </el-tooltip>
      
      <!-- 最小化到托盘 -->
      <el-tooltip content="最小化到托盘" placement="bottom">
        <button 
          class="control-btn minimize-btn"
          @click="minimize"
          @mousedown.stop
        >
          <el-icon><Minus /></el-icon>
        </button>
      </el-tooltip>
      
      <!-- 关闭按钮 -->
      <el-tooltip content="关闭" placement="bottom">
        <button 
          class="control-btn close-btn"
          @click="closeApp"
          @mousedown.stop
        >
          <el-icon><Close /></el-icon>
        </button>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Close, Minus, Stamp } from '@element-plus/icons-vue'

const alwaysOnTop = ref(true)

const startDrag = (e) => {
  if (!window.electronAPI) return
  
  window.electronAPI.startDrag()
  
  const onMouseMove = () => {
    window.electronAPI.drag()
  }
  
  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  }
  
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}

const togglePin = (e) => {
  e.preventDefault()
  e.stopPropagation()
  if (!window.electronAPI) {
    console.error('electronAPI not available')
    return
  }
  console.log('Toggle pin clicked')
  window.electronAPI.toggleAlwaysOnTop()
}

const minimize = (e) => {
  e.preventDefault()
  e.stopPropagation()
  if (!window.electronAPI) {
    console.error('electronAPI not available')
    return
  }
  console.log('Minimize clicked')
  window.electronAPI.minimizeToTray()
}

const closeApp = (e) => {
  e.preventDefault()
  e.stopPropagation()
  if (!window.electronAPI) {
    console.error('electronAPI not available')
    return
  }
  console.log('Close clicked')
  window.electronAPI.closeWindow()
}

onMounted(() => {
  // 监听置顶状态变化
  if (window.electronAPI) {
    window.electronAPI.onAlwaysOnTopChanged((value) => {
      alwaysOnTop.value = value
    })
  }
})
</script>

<style scoped>
.pet-drag-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  cursor: move;
  z-index: 10000;
  user-select: none;
  -webkit-app-region: drag; /* Electron 拖动区域 */
}

.drag-indicator {
  flex: 1;
  display: flex;
  align-items: center;
}

.drag-dots {
  display: flex;
  gap: 4px;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

.window-controls {
  display: flex;
  gap: 8px;
  -webkit-app-region: no-drag; /* 按钮不触发拖动 */
}

.control-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #606266;
  -webkit-app-region: no-drag;
  pointer-events: auto;
  z-index: 10001;
}

.control-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.pin-btn.active {
  background: rgba(64, 158, 255, 0.2);
  color: #409eff;
}

.minimize-btn:hover {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.close-btn:hover {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

/* 拖动时的效果 */
.pet-drag-bar:active {
  cursor: grabbing;
}
</style>

